$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$width: 82.292vw;
$f: 19.2;

body {
  background: #F7F7F7;
}

.home {
  position: relative;
  width: 100%;

  .main {
    width: 90vw;
    margin: 12vw auto 5vw auto;
    display: flex;
    justify-content: space-between;

    .l {
      color: #333;
      font-size: $fontSize_48;
      font-weight: bold;
      text-transform: uppercase;
    }

    .r {
      width: 70%;

      #googleMap{
        width: 100%;
        height: 705/$f+vw;
        border-radius: 30/$f+vw 30/$f+vw 0px 0px;
        outline: none;
        border: none;
        .gm-style div:nth-child(3) {
          border: none!important;
        }
      }

      .flex{
        border-radius: 0px 0px 16/$f+vw 16/$f+vw;
        background: #F0F0F0;
        display: flex;
        align-items: center;
        justify-content: center;
        .list{
          margin: 55/$f+vw 0;
          position: relative;
          &:not(:last-child):after{
            content: '';
            position: absolute;
            width: 1/$f+vw;
            height: 116/$f+vw;
            background: #D9D9D9;
            top: 50%;
            transform: translateY(-50%);
            right: -90/$f+vw;
          }
          &:not(:last-child) {
            margin: 0 183/$f+vw 0 0;
          }
          .icon{
            width: 34/$f+vw;
            height: 28/$f+vw;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25/$f+vw;
            img{
              object-fit: contain;
              max-width: 100%;
              max-height: 100%;
            }
          }
          .text{
            h5{
              color: #333;
              text-align: center;
              font-size: 18/$f+vw;
              font-weight: 700;
              line-height: 30/$f+vw; /* 166.667% */
              text-transform: uppercase;
              margin: 0 0 17/$f+vw;
            }
            p{
              color: #666;
              text-align: center;
              font-size: 18/$f+vw;
              font-weight: 400;
              line-height: 30/$f+vw; /* 166.667% */
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .main {
      margin: 20px auto;
      flex-direction: column;
      .l{
        font-size: 24px;
      }
      .r{
        width: 100%;
        margin-top: 10px;
        .t1{
          font-size: 16px;
          text-align: justify;
          line-height: 1.5;
        }
        .form{
          margin-top: 20px;
          .item{
            .tag{
              font-size: 14px;
              width: 20%;
            }
            .nr{
              width: 80%;
              input{
                padding: 15px 0;
                font-size: 14px;
              }
            }
          }
          .item2{
            padding: 15px 0;
            .nr{
              width: 100%;
              textarea{
                font-size: 14px;
              }
            }
          }
          .submit{
            p{
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  .home .main .r #googleMap{
    height: 300px;
    border-radius: 15px 15px 0px 0px;
  }
  .home .main .r .flex{
    border-radius:  0px 0px 15px 15px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 20px;
    padding: 30px 5%;
  }
  .home .main .r .flex .list:not(:last-child) {
    margin: 0;
  }
  .home .main .r .flex .list .icon{
    width: 20px;
    height: 16px;
    margin: 0 auto 10px;
  }
  .home .main .r .flex .list .text h5{
    font-size: 15px;
    line-height: 1;
    margin: 0 0 8px;
  }
  .home .main .r .flex .list .text p{
    font-size: 14px;
    line-height: 1.5;
  }
  .home .main .r .flex .list:not(:last-child):after{
    display: none;
  }
}